<script setup>
import { reactive, ref, watch } from 'vue'

import { useUserStore } from '@/stores/counter';
import { addTasks } from '@/api/tasks';//添加任务
import { getsectorsApi } from '@/api/sectors'//部门数据
import { getStaff } from '@/api/staff'//员工数据

// 拿到员工token
const userStore = useUserStore();
const userMsg = userStore.userMsg;
const token = userMsg.token;
// 获取当前登录的员工姓名
const userName = userStore.userMsg.username;
const staffId = userStore.userMsg.staffId;

// 部门数据
const allsector = reactive([]);
(async function(){
  getsectorsApi(token).then(res=>{
        allsector.push(...res.data.data)
    })
})();
// console.log(allsector);

// 员工数据
const allstaff = reactive([]);
(async function(){
  getStaff(token).then((res)=>{
        allstaff.push(...res.data.data)
    })
  })()
  // console.log(allstaff);


  

// 添加数据


// 创建自定义事件用来和父组件传输数据
const props = defineProps({dialogFormVisible:{}})
const emits = defineEmits(["isShow2"])

const dFVisible = ref(props.dialogFormVisible);

const formSize = ref('default')
// 用来记录表单元素
const ruleFormRef = ref();

// 用来收集当前表单中的数据
const ruleForm = reactive({
  token:token,
  creatTime: new Date().getTime(),
  title: '',
  sectorId:'',//部门属性
  startTime: '',
  endTime: '',
  approveState: '未完成',
  sectorName:'',//部门
  approval_time:'',
  leader:userName,//领导，创建者
  content:'',//任务详情
  accountId:staffId,
  staffId:'',
  
})

// 监听父组件数据
watch(()=>props.dialogFormVisible,(val)=>{
  dFVisible.value = val;
})

// 取消按钮，返回任务列表，并且将输入的内容清空
const  cancel = (formEl)=>{
  if (!formEl) return;
  formEl.resetFields()
  dFVisible.value = false;
  emits("isShow2",false);
}
// 创建任务按钮触发父组件中的isshow事件
function submit(formEl){
  if (!formEl) return;
  dFVisible.value = false;
  emits('isShow2',ruleForm)
  formEl.resetFields()

  // addTasks()


}
console.log(ruleForm);

// 点击空白，点击右上角的X，按键盘esc键
function close(formEl){
  dFVisible.value = false;
  // if (!formEl) return;
  // formEl.resetFields()
  emits("isShow2",false)
  console.log("X按钮");
}

</script>

<template>
  <el-dialog v-model="dFVisible" :before-close="close">
    <p>{{ ruleForm }}</p>
    <!-- ref="ruleFormRef"
    :model="ruleForm"
    class="demo-ruleForm"
    :size="formSize"
    status-icon -->
    <el-form label-width="120px" ref="ruleFormRef" :model="ruleForm">
      <el-form-item label="任务标题" prop="title">
        <el-input v-model="ruleForm.title" />
      </el-form-item>
      <el-form-item label="完成时间" required>
        <el-col :span="8">
          <el-form-item prop="startTime">
            <el-date-picker
              v-model="ruleForm.startTime"
              type="date"
              placeholder="开始时间"
              format="YYYY/MM/DD"
              value-format="x"
            />
          </el-form-item>
        </el-col>
        <el-col class="text-center" :span="1">
          <span class="text-gray-500">至</span>
        </el-col>

        <el-col :span="8">
          <el-form-item prop="endTime">
            <el-date-picker
              v-model="ruleForm.endTime"
              type="date"
              placeholder="结束时间"
              format="YYYY/MM/DD"
              value-format="x"
            />
          </el-form-item>
        </el-col>

      </el-form-item>
      <el-form-item label="任务详情" prop="content" >
        <el-input v-model="ruleForm.content" type="textarea" rows="4" />
      </el-form-item>
      <!-- <el-form-item label="所属部门" prop="team">
        <el-select v-model="ruleForm.sectorName" placeholder="请选择部门">
          <el-option
            v-for="(item,index) in allsector"
            :key="index"
            :label="item.sectorName"
            :value="item.sectorName"
          ></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="部门员工" prop="staff">
        <el-select v-model="ruleForm.staffName" placeholder="请选择员工">
          <el-option
            v-for="(item,index) in allstaff"
              :key="index"
              :label="item.staffName"
              :value="item.staffName"
          ></el-option>
        </el-select>
        <span class="task_person_tips">*指定完成此任务的人</span>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit(ruleFormRef)">创建任务</el-button>
        <el-button @click="cancel(ruleFormRef)">取消</el-button>
      </el-form-item>
    </el-form>
    
  </el-dialog>
</template>

<style scoped>
    .el-form-item .task_person_tips{
        margin-left: 20px;
        color: #999;
    }
    .text-center{
        text-align: center;
    }
</style>
